<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div v-if="crud.props.searchToggle">
                <!-- 搜索 -->
                <el-input v-model="query.blurry" clearable size="small" placeholder="根据设备类型模糊搜索" style="width: 200px;"
                             class="filter-item" @keyup.enter.native="toQuery" />
                <rrOperation :crud="crud"/>
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission"/>
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                       :title="crud.status.title" width="500px">
                <el-form ref="form" :model="form" :rules="rules" size="small"
                         label-width="80px">
                                <el-form-item label="设备类型" prop="equipmentTypeName">
                                        <el-input v-model="form.equipmentTypeName" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item label="是否收费" size="mini" prop="isCollectFees">
                                    <el-radio-group v-model="form.isCollectFees">
                                        <el-radio :label="0" type="danger">否</el-radio>
                                        <el-radio :label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="收费金额" prop="amount">
                                        <el-input type="number" v-model="form.amount" style="width: 370px;" placeholder="请输入纯数字"/>
                                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="crud.cancelCU">取消</el-button>
                    <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
                </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                      @selection-change="crud.selectionChangeHandler">
                <el-table-column type="selection" width="55"/>
                                <el-table-column v-if="columns.visible('id')"
                                                 prop="id"
                                                 label="ID"/>
                                <el-table-column v-if="columns.visible('equipmentTypeName')"
                                                 prop="equipmentTypeName"
                                                 label="设备类型"/>
                                <el-table-column v-if="columns.visible('isCollectFees')"
                                                prop="isHost"
                                                label="是否收费">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag v-if="scope.row.isCollectFees === 1" :type="''">是</el-tag>
                                            <el-tag v-else :type=" 'info' ">否</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('amount')"
                                                 prop="amount"
                                                 label="收费金额"/>
                                <!--
                                <el-table-column v-if="columns.visible('isHost')"
                                                 prop="isHost"
                                                 label="是否主机">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag v-if="scope.row.isHost === 1" :type="''">是</el-tag>
                                            <el-tag v-else :type=" 'info' ">否</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                 -->
                <el-table-column v-permission="['admin','equipmentType:edit','equipmentType:del']" label="操作"
                                 width="150px" align="center">
                    <template slot-scope="scope">
                        <udOperation
                                :data="scope.row"
                                :permission="permission"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";
    import crudEquipmentType from '@/api/equipmentType'

    // crud交由presenter持有
    const defaultCrud = CRUD({ title: '设备类型', url: 'api/equipmentType', sort: 'id,desc', crudMethod: { ...crudEquipmentType }})

    const defaultForm = {id: null, equipmentTypeName: null, isCollectFees: null, amount: null, isHost: null}
    export default {
        name: 'EquipmentType',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        data() {
            return {
                
                permission: {
                    add: ['admin', 'equipmentType:add'],
                    edit: ['admin', 'equipmentType:edit'],
                    del: ['admin', 'equipmentType:del']
                },
                rules: {
                    equipmentTypeName: [
                        { required: true, message: '请输入设备类型', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 40 个字符', trigger: 'blur' }
                    ], 
                    isCollectFees: [
                        { required: true, message: '请选择是否收费', trigger: 'blur' }
                    ], 
                    amount: [
                        { required: true, message: '请输入收费金额', trigger: 'blur' }
                    ]
                }           
            }  
        },
        watch: {
        },
        methods: {
            // 获取数据前设置好接口地址
            [CRUD.HOOK.beforeRefresh]() {
                return true
            }, // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
            },
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
